import { View, Image } from "@tarojs/components"
import cardImg from '@/assets/image/card-img.png'
import { useEffect, useRef, useState } from "react"
import { AtButton } from "taro-ui"
import Taro, { Current, getCurrentInstance } from "@tarojs/taro"
import EditClothes from "../../../components/edit-clothes/index"
import './index.less'

const listData = [
    {
        image: cardImg,
        id: 0
    },
    {
        image: cardImg,
        id: 1
    },
    {
        image: cardImg,
        id: 2
    },
    {
        image: cardImg,
        id: 4
    },
]

function ShowClothes() {
    const ref = useRef()
    const [isOpened, setIsOpened] = useState(false)

    useEffect(() => {
        const instance: Current = getCurrentInstance()
        const params = instance!.router!.params
        Taro.setNavigationBarTitle({
            title: params.text ?? ''
        })
    }, [ref])

    function handleClick() {
        setIsOpened(true)
    }

    return (
        <View ref={ref} className='show-clothes'>
            <View className='at-row at-row--wrap'>
                {
                    listData.map(({ image }, k) => {
                        return <View className='at-col at-col-4 img-wrap' key={k} onClick={() => handleClick()}>
                            <Image src={image} style={{ width: '100%', height: '33.33vw' }} />
                        </View>
                    })
                }
            </View>
            {
                isOpened &&
                <View className='clothes-detail'>
                    <EditClothes />
                    <View className='btn'>
                        <AtButton onClick={() => setIsOpened(false)}>关闭</AtButton>
                    </View>
                </View>
            }
        </View>
    )
}

export default ShowClothes